<template>
  <div class="detaile">
    <!-- 顶部 -->
    <div class="detaile-top" :style="{ backgroundColor: color }" ref="top">
      <div class="detaile-top-left" @click="backBtn">
        <div :style="{ backgroundColor: color1 }">
          <img :src="backSrc" alt="" />
        </div>
      </div>
      <div class="detaile-top-center" :style="{ opacity: opacity }">
        <a
          ><span
            :class="{ activeBorder: borderType2 == 'top' }"
            @click="btnBorder('top')"
            >商品</span
          >
        </a>
        <a
          ><span
            :class="{ activeBorder: borderType2 == 'pingjia' }"
            @click="btnBorder('pingjia')"
            >评价</span
          >
        </a>
        <a
          ><span
            :class="{ activeBorder: borderType2 == 'xiangqing' }"
            @click="btnBorder('xiangqing')"
            >详情</span
          >
        </a>
        <a
          ><span
            :class="{ activeBorder: borderType2 == 'tuijian' }"
            @click="btnBorder('tuijian')"
            >推荐</span
          >
        </a>
      </div>
      <div class="detaile-top-right" @click.stop="seen = !seen">
        <div :style="{ backgroundColor: color1 }">
          <img :src="moreSrc" alt="" />
        </div>
      </div>
      <div class="detaileNav" v-if="seen">
        <div class="detaileNav-div">
          <div>
            <img class="detaileNav-img" src="../images/shouye.png" alt="" />
          </div>
          <p class="detaileNav-title" @click="btnClick('/')">首页</p>
        </div>
        <div class="detaileNav-div">
          <div>
            <img class="detaileNav-img" src="../images/fenlei.png" alt="" />
          </div>
          <p class="detaileNav-title" @click="btnClick('/classify')">
            分类搜索
          </p>
        </div>
        <div class="detaileNav-div">
          <div>
            <img class="detaileNav-img" src="../images/wode.png" alt="" />
          </div>
          <p class="detaileNav-title" @click="btnClick('/mepage')">我的京东</p>
        </div>
        <div class="detaileNav-div">
          <div>
            <img class="detaileNav-img" src="../images/zuji.png" alt="" />
          </div>
          <p class="detaileNav-title">浏览记录</p>
        </div>
        <div class="detaileNav-div">
          <div>
            <img class="detaileNav-img" src="../images/guanzhu.png" alt="" />
          </div>
          <p class="detaileNav-title">我的关注</p>
        </div>
        <div class="detaileNav-div">
          <div>
            <img class="detaileNav-img" src="../images/fenxiang.png" alt="" />
          </div>
          <p class="detaileNav-title noborder">分享</p>
        </div>
      </div>
    </div>
    <!-- 中间 -->
    <div class="detaile-middle">
      <!-- 轮播图 -->
      <div class="detaile-swiper" :class="{ videoClass: videoClass }">
        <el-carousel
          class="detaileSwiper"
          indicator-position="none"
          ref="myswiper"
          @change="pageNumChange"
        >
          <el-carousel-item
            v-for="item in SwiperItems"
            :key="item.id"
            :class="{ videoClass2: videoClass2 }"
          >
            <img
              class="detaileSwiperImg"
              :src="item.img"
              alt=""
              @touchend="touchend"
              @touchstart.stop="touchstart"
            />
          </el-carousel-item>
        </el-carousel>
        <!-- 播放按钮 -->
        <div class="videoBtn" v-if="!videoClass">
          <div @click="vedioBtn" class="videoBtn-div1">
            <img src="../images/vedioBtn.jpg" alt="" />
            <span>00′59″</span>
          </div>
          <div class="videoBtn-div2" v-if="videoSeen" @click="vedioBtn2">
            <video :src="obj.swiperVideo" controls>
              <source :src="obj.swiperVideo" type="video/mp4" />
            </video>
          </div>
        </div>
        <!-- 页数 -->
        <div class="swiper-pageNum" v-if="!videoClass" v-show="videoSeen2">
          <span>{{ pageNum }}</span>
          <span>/</span>
          <span>5</span>
        </div>
      </div>
      <!-- 广告 -->
      <div class="detaile-advertise">
        <img :src="obj.advertiseImg" alt="" />
      </div>
      <!-- 价格 -->
      <div class="detaile-price">
        <div class="price-div">
          <span class="price-priceSmall">￥</span>
          <span class="price-priceBig">{{ obj.priceBig }}</span>
          <span class="price-priceSmall">{{ obj.priceSmall }}</span>
        </div>
        <div class="detaile-price-right">
          <div class="detaile-price-right-div">
            <img
              class="detaile-price-right-img"
              src="../images/jiangjia.png"
              alt=""
            />
            <p class="detaile-price-right-p">降价提醒</p>
          </div>
          <div class="detaile-price-right-div">
            <img
              class="detaile-price-right-img"
              src="../images/shoucangadd.png"
              alt=""
            />
            <p class="detaile-price-right-p">收藏</p>
          </div>
        </div>
      </div>
      <!-- 标题介绍 -->
      <div class="detaile-msg">
        <div class="detaile-msg-top">
          <img class="detaile-jingdongImg" :src="obj.jingdongImg" alt="" />
          <p class="detaile-title1">{{ obj.title1 }}</p>
        </div>
        <div class="detaile-name">
          <p class="detaile-goodName">{{ obj.goodName }}</p>
        </div>
        <div class="detaile-msg-bottom">
          <p class="detaile-msg-bottom-p">
            【买好货逛京东】京东618狂欢购，爆款每日特价购，部分好物每满300减30，速戳抢购速戳
            <a
              class="detaile-msg-bottom-a"
              href="https://pro.m.jd.com/mall/active/2eFfCgZbsJVAkYKVeUW8DUJ7QiZf/index.html?sceneval=2&jxsid=16233741558432695396"
            >
              查看></a
            >
          </p>
        </div>
      </div>
      <!-- 优惠 -->
      <div class="detaile-youhui">
        <div class="youhui-first">
          <p>优惠</p>
          <div class="youhui-first-span">
            <span class="youhui-first-befor"></span>
            <span class="youhui-first-span">满249减50</span>
            <span class="youhui-first-after"></span>
          </div>
          <div class="youhui-first-span">
            <span class="youhui-first-befor"></span>
            <span class="youhui-first-span">满249减50</span>
            <span class="youhui-first-after"></span>
          </div>
          <div class="youhui-first-img">
            <img src="../images/detail-more.png" alt="" />
          </div>
        </div>
        <div class="youhui-two">
          <span class="youhui-two-span1">满额返券</span>
          <span class="youhui-two-span2">满100元减10元</span>
        </div>
      </div>
      <!-- 已选 -->
      <div class="detaile-yixuan">
        <!-- 展示层 -->
        <van-cell is-link @click="showPopup" class="detaile-yixuan-van">
          <span class="yixuan-span1">已选</span>
          <span class="yixuan-span2">{{ goodName }} , {{ goodsNum }}个</span>
          <img class="yixuan-moreImg" src="../images/detail-more.png" alt="" />
        </van-cell>
        <!-- 弹出层 -->
        <van-popup v-model="show" position="bottom" round>
          <div class="detaile-select">
            <div class="select-top">
              <div class="select-top-left">
                <img class="select-top-img" :src="goodsImg" alt="" />
              </div>
              <div class="select-top-right">
                <p class="select-top-price">
                  <span class="price-priceSmall">￥</span>
                  <span class="price-priceBig">{{ selectPriceBig }}</span>
                  <span class="price-priceSmall">{{ selectPriceSmall }}</span>
                </p>
                <p class="select-yixuan">
                  <span class="select-yixuan-one">已选</span>
                  <span class="select-yixuan-two">{{ goodName }},</span>
                  <span class="select-yixuan-three">{{ goodsNum }}个</span>
                </p>
                <div class="xxx">
                  <div @click="show = !show">
                    <img src="../images/x.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
            <div class="select-top-middle">
              <p class="select-leibie">类别</p>
              <p
                class="select-goodname"
                v-for="(item, index) in obj.goodsChange"
                :class="{ activeClass: borderType3 == index }"
                :key="item.id"
                @click="seleceGood(index)"
              >
                {{ item.name }}
              </p>
            </div>
            <div class="select-add">
              <p class="select-shuliang">数量</p>
              <p class="select-change">
                <span
                  class="select-down"
                  :style="{ color: colorClick }"
                  @click="selectDowm()"
                  >-</span
                >
                <span class="select-num">{{ goodsNum }}</span>
                <span class="select-up" @click="selectUp()">+</span>
              </p>
            </div>
            <div class="select-bottom">
              <div class="select-bottom-add" @click="ShopCart()">
                加入购物车
              </div>
              <div class="select-bottom-shop">立即购买</div>
            </div>
          </div>
        </van-popup>
      </div>
      <!-- 送至 -->
      <div class="detaile-songzhi">
        <!-- 展示层 -->
        <van-cell is-link @click="show3 = true" class="detaile-songzhi-van">
          <div class="songzhi-left">送至</div>
          <div class="songzhi-center">
            <p class="songzhi-address">
              {{ fieldValue }}
            </p>
            <div class="songzhi-msg">
              <img
                class="songzhi-msg-img"
                src="../images/jingdongwuliu.png"
                alt=""
              />
              <p class="songzhi-msg-p">
                <span class="songzhi-msg-span1">现货</span>
                <span class="songzhi-msg-span2">
                  23:10前下单，预计明天送达</span
                >
              </p>
            </div>
          </div>
          <div class="songzhi-right">
            <img src="../images/detail-more.png" alt="" />
          </div>
        </van-cell>
        <!-- 弹出层 -->
        <van-popup v-model="show3" position="bottom" round>
          <van-cascader
            v-model="cascaderValue"
            title="请选择所在地区"
            :options="options"
            @close="show3 = false"
            @finish="onFinish"
          />
        </van-popup>
      </div>
      <!-- 重量 -->
      <div class="detaile-weight">
        <span class="weight-span1">重量</span>
        <span class="weight-span2">{{ obj.weight }}</span>
      </div>
      <!-- 评价 -->
      <div class="detaile-pingjia" ref="pingjia">
        <div class="pingjia-top" @click="btnClickA(obj.pingjiaUrl)">
          <div class="pingjia-top-div">
            <div class="bgc-gradient"></div>
            <span class="pingjia-top-span1">评价</span>
            <span class="pingjia-top-span2">{{ obj.pinjignum }}</span>
          </div>
          <div>
            <span class="pingjia-top-span3">好评度</span>
            <span class="pingjia-top-span4">{{ obj.haopingdu }}</span>
            <span class="pingjia-top-span5">></span>
          </div>
        </div>
        <div class="pingjia-chengyu">
          <p v-for="item in obj.chengyu" :key="item.id">{{ item.text }}</p>
        </div>
        <div class="kehupingjia" v-for="item in obj.kehupingjia" :key="item.id">
          <div class="kehupingjia-top">
            <div class="kehupingjia-top-div1">
              <img :src="item.touxiang" alt="" />
            </div>
            <div class="kehupingjia-top-div2">
              <span>{{ item.name }}</span>
            </div>
            <div class="kehupingjia-top-div3">
              <img src="../images/xing.png" alt="" />
              <img src="../images/xing.png" alt="" />
              <img src="../images/xing.png" alt="" />
              <img src="../images/xing.png" alt="" />
              <img src="../images/xing.png" alt="" />
            </div>
            <div class="kehupingjia-top-div4">
              <span>{{ item.time }}</span>
            </div>
          </div>
          <div class="kehupingjia-middle">
            {{ item.msg }}
          </div>
          <div class="kehupingjia-bottom">
            <video :src="item.view" controls>
              <source :src="item.view" type="video/mp4" />
            </video>
            <img :src="item.img1" alt="" />
            <img :src="item.img2" alt="" />
            <img :src="item.img3" alt="" />
            <img :src="item.img4" alt="" />
            <img :src="item.img5" alt="" />
            <img :src="item.img6" alt="" />
            <img :src="item.img7" alt="" />
          </div>
        </div>
        <div class="quanbupingjia" @click="btnClickA(obj.pingjiaUrl)">
          <div>查看全部评价</div>
        </div>
      </div>
      <!-- 问答 -->
      <div class="detaile-wenda">
        <div class="detaile-wenda-top">
          <div class="bgc-gradient1"></div>
          <span class="wenda-span1">问答</span>
          <span class="wenda-span2" @click="btnClickA(obj.answerUrl)"
            >查看全部问答 ></span
          >
        </div>
        <div
          class="detaile-wenda-bottom"
          v-for="item in obj.answer"
          :key="item.id"
        >
          <div class="wenda-bottom-left">
            <span class="wenda-bottom-left-span1">问</span>
            <span class="wenda-bottom-left-span2">{{ item.text }}</span>
          </div>
          <div class="wenda-bottom-right">
            <span class="wenda-bottom-right-span1">{{ item.num }}</span>
          </div>
        </div>
      </div>
      <!-- 店铺信息 -->
      <div class="detaile-dianpumsg">
        <div class="dianpumsg-top">
          <img class="dianpumsg-top-img" :src="objDP.img" alt="" />
          <span class="dianpumsg-top-span1">{{ objDP.name }}</span>
          <span class="dianpumsg-top-span2">{{ objDP.text }}</span>
        </div>
        <div class="dianpumsg-middle">
          <div class="dianpumsg-middle-left">
            <p class="dianpumsg-middle-left-p1">{{ objDP.fensi }}</p>
            <p class="dianpumsg-middle-left-p2">粉丝人数</p>
          </div>
          <div class="dianpumsg-middle-right">
            <p class="dianpumsg-middle-left-p1">{{ objDP.goodsnum }}</p>
            <p class="dianpumsg-middle-left-p2">全部商品</p>
          </div>
        </div>
        <div class="dianpumsg-bottom">
          <div class="dianpumsg-bottom-div" @click="btnClickA(objDP.dianUrl)">
            <img
              class="dianpumsg-bottom-img"
              src="../images/xing2.png"
              alt=""
            />
            <span class="dianpumsg-bottom-span">关注店铺</span>
          </div>
          <div class="dianpumsg-bottom-div" @click="btnClickA(objDP.dianUrl)">
            <img
              class="dianpumsg-bottom-img"
              src="../images/dianpu2.png"
              alt=""
            />
            <span class="dianpumsg-bottom-span">进入店铺</span>
          </div>
        </div>
      </div>
      <!-- 猜你喜欢 -->
      <div class="detaile-like" ref="tuijian">
        <div class="like-top">
          <div class="bgc-gradient2"></div>
          <span class="like-top-span">猜你喜欢</span>
        </div>
        <div class="like-swiper">
          <el-carousel class="likeSwiper" :autoplay="false" ref="myswiper2">
            <el-carousel-item name="like1">
              <ul class="likeSwiper-ul">
                <li
                  class="likeSwiper-li"
                  v-for="item in obj.like1"
                  :key="item.id"
                  @click="btnClickA(item.url)"
                  @touchend="touchend"
                  @touchstart="touchstart"
                >
                  <img class="likeSwiper-img" :src="item.img" alt="" />
                  <p class="likeSwiper-msg">{{ item.msg }}</p>
                  <p class="likeSwiper-price">
                    <span class="likeSwiper-price-small">￥</span>
                    <span class="likeSwiper-price-big">{{
                      item.priceBig
                    }}</span>
                    <span class="likeSwiper-price-small">{{
                      item.priceSmall
                    }}</span>
                  </p>
                </li>
              </ul>
            </el-carousel-item>
            <el-carousel-item name="like2">
              <ul class="likeSwiper-ul">
                <li
                  class="likeSwiper-li"
                  v-for="item in obj.like2"
                  :key="item.id"
                  @click="btnClickA(item.url)"
                  @touchend="touchend"
                  @touchstart="touchstart"
                >
                  <img class="likeSwiper-img" :src="item.img" alt="" />
                  <p class="likeSwiper-msg">{{ item.msg }}</p>
                  <p class="likeSwiper-price">
                    <span class="likeSwiper-price-small">￥</span>
                    <span class="likeSwiper-price-big">{{
                      item.priceBig
                    }}</span>
                    <span class="likeSwiper-price-small">{{
                      item.priceSmall
                    }}</span>
                  </p>
                </li>
              </ul>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <!-- 商品介绍 -->
      <div class="detaile-like-jieshao" ref="xiangqing">
        <div class="jieshao-btn">
          <span
            class="jieshao-btn-span"
            :class="{ activeBorder: borderType == 'ShangPinJieShao' }"
            @click="btnCom('ShangPinJieShao')"
            >商品介绍</span
          >
          <span
            class="jieshao-btn-span"
            :class="{ activeBorder: borderType == 'GuiGeCanShu' }"
            @click="btnCom('GuiGeCanShu')"
            >规格参数</span
          >
          <span
            class="jieshao-btn-span"
            :class="{ activeBorder: borderType == 'ShouHou' }"
            @click="btnCom('ShouHou')"
            >售后保障</span
          >
        </div>
        <div class="active-component">
          <componert :is="comName" v-bind="obj.shangpingjieshao"></componert>
        </div>
      </div>
      <!-- 京东商标 -->
      <div class="jingdong2">
        <img class="jingdong2-img" src="../images/jingdong3.png" alt="" />
      </div>
    </div>
    <!-- 底部 -->
    <div class="detaile-footer">
      <div
        class="detaile-dianpu"
        @click="
          btnClickA(
            'https://shop.m.jd.com/shopv2/mzpage?shopId=1000011901&venderId=1000011901&skuId=4251009&categoryId=1320_12202_12207&sceneval=2&jxsid=16233741558432695396&_fd=jdm&_fd=jdm'
          )
        "
      >
        <img src="../images/detail-dianpu.png" alt="" />
        <p>店铺</p>
      </div>
      <div
        class="detaile-kefu"
        @click="
          btnClickA(
            'https://plogin.m.jd.com/login/login?appid=300&returnurl=https%3A%2F%2Fwq.jd.com%2Fpassport%2FLoginRedirect%3Fstate%3D1874104601%26returnurl%3Dhttps%253A%252F%252Fchat.jd.com%252Fmerchant%252Findex%253Fv%253D6%2526sku%253D4251009%2526entry%253Dm_item%2526imgUrl%253D%25252F%25252Fimg14.360buyimg.com%25252Fn4%25252Fjfs%25252Ft1%25252F196449%25252F39%25252F7504%25252F155576%25252F60c2b9feEaa181e23%25252Fd028a36e8bc53a09.jpg%2526goodName%253D%2525E4%2525BC%2525A0%2525E5%2525A5%252587%2525E4%2525BC%25259A%2525E8%25258C%2525B6%2525E5%25258F%2525B6%252520%2525E7%252589%2525B9%2525E7%2525BA%2525A7%2525E9%252587%252591%2525E9%2525AA%25258F%2525E7%25259C%252589%2525E7%2525BA%2525A2%2525E8%25258C%2525B6%252520%2525E6%2525AD%2525A6%2525E5%2525A4%2525B7%2525E6%2525AD%2525A3%2525E5%2525B1%2525B1%2525E5%2525B0%25258F%2525E7%2525A7%25258D%2525E8%25258C%2525B6%2525E7%2525A4%2525BC%2525E7%25259B%252592%2525E8%2525A3%252585300g%2526jdPrice%253D298%2526sid%253Dafafbdc1aeb2f08c449c0d23bbe4c39b%2526&source=wq_passport'
          )
        "
      >
        <img src="../images/detail-kefu.png" alt="" />
        <p>客服</p>
      </div>
      <div class="detaile-shopcart" @click="btnClick('/shopcart')">
        <img src="../images/detail-shopcar.png" alt="" />
        <p>购物车</p>
      </div>
      <div class="addShopCart" @click="showPopup">
        <p>加入购物车</p>
      </div>
      <div class="nowShop">
        <p>立即购买</p>
      </div>
    </div>
  </div>
</template>

<script>
import ShangPinJieShao from "./ShangPinJieShao.vue";
import GuiGeCanShu from "./GuiGeCanShu.vue";
import ShouHou from "./ShouHou.vue";

export default {
  data() {
    return {
      obj: {},
      objDP: {},
      backSrc: "./images/back-1write.png",
      moreSrc: "./images/more-write.png",
      color: "",
      color1: "#666",
      seen: false,
      weight: "",
      border: "",
      opacity: "",
      SwiperItems: [],
      show: false,
      show1: false,
      show3: false,
      selectPriceBig: "",
      selectPriceSmall: "",
      goodName: "",
      goodsImg: "",
      goodsNum: 1,
      colorClick: "#262626",
      comName: "ShangPinJieShao",
      borderType: "ShangPinJieShao",
      borderType2: "shangping",
      borderType3: 0,
      fieldValue: "北京朝阳区三环到四环之间",
      cascaderValue: "",
      options: [],
      goodId: "",
      videoClass: false,
      videoClass2: false,
      videoSeen: false,
      videoSeen2: true,
      pageNum: 1,
    };
  },

  components: {
    ShangPinJieShao,
    GuiGeCanShu,
    ShouHou,
  },
  methods: {
    backBtn() {
      this.$router.back();
    },
    btnClickA(url) {
      window.location.href = url;
    },
    btnClick(hash) {
      this.$router.push({
        path: hash,
      });
    },
    showPopup() {
      this.show = true;
    },
    showPopup1() {
      this.show1 = true;
    },
    btnCom(comName) {
      this.comName = comName;
      this.borderType = comName;
    },
    btnBorder(name) {
      this.borderType2 = name;
      if (name == "top") {
        document.documentElement.scrollTop = 0;
      }
      if (name == "pingjia") {
        document.documentElement.scrollTop = 850;
      }
      if (name == "tuijian") {
        document.documentElement.scrollTop = 1843;
      }
      if (name == "xiangqing") {
        document.documentElement.scrollTop = 2292;
      }
    },
    seleceGood(index) {
      this.selectPriceBig = this.obj.goodsChange[index].priceBig;
      this.selectPriceSmall = this.obj.goodsChange[index].priceSmall;
      this.goodName = this.obj.goodsChange[index].name;
      this.goodsImg = this.obj.goodsChange[index].img;
      this.borderType3 = index;
      this.goodId = this.obj.goodsChange[index].id;
    },
    selectDowm() {
      this.goodsNum -= 1;
      this.colorClick = "#262626";
      if (this.goodsNum <= 1) {
        this.goodsNum = 1;
        this.colorClick = "#f2f2f2";
      }
    },
    selectUp() {
      this.goodsNum += 1;
      this.colorClick = "#262626";
    },
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
    ShopCart() {
      let name = this.goodName;
      let num = Number(this.goodsNum);
      let priceOne = Number.parseFloat(
        this.selectPriceBig.concat(this.selectPriceSmall)
      );
      let img = this.goodsImg;
      let msg = this.obj.goodName;
      let id = this.goodId;

      this.$store.commit("detail", {
        name: name,
        num: num,
        price: priceOne,
        img: img,
        msg: msg,
        id: id,
      });
      this.show = false;
    },
    vedioBtn() {
      this.videoSeen = true;
      this.videoSeen2 = false;
    },
    vedioBtn2() {
      this.videoSeen = false;
      this.videoSeen2 = true;
    },
    pageNumChange(val) {
      this.pageNum = val + 1;
    },
    touchstart(event) {
      this.startX = event.changedTouches[0].pageX;
    },
    touchend(event) {
      let start = event.changedTouches[0].pageX;
      let num = start - this.startX;
      if (num < 0) {
        this.$refs.myswiper.next();
        this.$refs.myswiper2.next();
      } else if (num > 0) {
        this.$refs.myswiper.prev();
        this.$refs.myswiper2.prev();
      } else {
        this.videoClass = !this.videoClass;
        this.videoClass2 = !this.videoClass2;
      }
    },
    getDate() {
      let id = this.$route.query.id;
      let that = this;
      let url = "./data/index.json";
      this.axios
        .get(url)
        .then(function (response) {
          let arr = response.data.Detaile;
          that.options = response.data.Options;
          arr.forEach(function (node) {
            if (node.index == id) {
              that.obj = node;
              that.objDP = that.obj.dianpuxinxi;
              that.SwiperItems = node.swiper;
              that.selectPriceBig = node.goodsChange[0].priceBig;
              that.selectPriceSmall = node.goodsChange[0].priceSmall;
              that.goodName = node.goodsChange[0].name;
              that.goodsImg = node.goodsChange[0].img;
            }
          });
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  watch: {
    $route() {
      this.getDate();
    },
  },

  created() {
    this.getDate();
  },

  mounted() {
    let that = this;
    window.addEventListener("scroll", function (e) {
      let top = e.target.scrollingElement.scrollTop;
      let a = top / 1000;
      if (top > 0) {
        that.color = "#fff";
        that.color1 = "#fff";
        that.backSrc = "./images/back-1.png";
        that.moreSrc = "./images/more.png";
        if (top > 0 && top < 70) {
          that.opacity += a;
          that.borderType2 = "top";
        } else {
          that.opacity = 1;
          if (top >= 70 && top < 850) {
            that.borderType2 = "top";
          } else if (top > 850 && top < 1843) {
            that.borderType2 = "pingjia";
          } else if (top > 1843 && top < 2292) {
            that.borderType2 = "tuijian";
          } else if (top > 2292) {
            that.borderType2 = "xiangqing";
          }
        }
      } else {
        that.color = "";
        that.opacity = 0;
        that.color1 = "#666";
        that.backSrc = "./images/back-1write.png";
        that.moreSrc = "./images/more-write.png";
      }
      that.seen = false;
    });
    document.addEventListener("click", function () {
      that.seen = false;
    });
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}

html,
.detaile {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
}
/* 顶部 */
.detaile-top {
  width: 100%;
  height: 2.75rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 999;
}
.detaile-top-center span {
  color: #252525;
}
.detaile-top-left,
.detaile-top-right {
  width: 2.5rem;
  height: 2.75rem;
  display: flex;
  justify-content: center;
}
.detaile-top-left div,
.detaile-top-right div {
  width: 2rem;
  height: 2rem;
  margin: auto;
  border-radius: 50%;
  display: flex;
}
.detaile-top-left img,
.detaile-top-right img {
  width: 1.25rem;
  height: 1.25rem;
  margin: auto;
  margin: auto;
}
/* 顶部导航 */
.detaileNav {
  width: 7.8125rem;
  height: 15.3125rem;
  position: absolute;
  top: 2.75rem;
  right: 1.25rem;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 0.3125rem;
}
.detaileNav-div {
  width: 100%;
  height: 2.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.detaileNav-div div {
  width: 2rem;
  height: 2rem;
  display: flex;
}
.detaileNav-img {
  width: 1.2rem;
  height: 1.2rem;
  margin: auto;
}
.detaileNav-title {
  width: 5.3125rem;
  font-size: 0.875rem;
  font-weight: 700;
  height: 2.5rem;
  line-height: 2.5rem;
  color: #fff;
  border-bottom: 1px solid #473636;
}
.noborder {
  border: none;
}
.detaile-top-center {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.detaile-top-center a {
  width: 2.8125rem;
  height: 2.75rem;
  text-align: center;
  line-height: 2.75rem;
  font-size: 0.875rem;
}
.active-span {
  font-weight: 700;
  border-bottom: 1px solid;
  border-bottom-color: linear-gradient(right, #f95c47, #f8988a, #facabe);
}
/* 中间 */
.detaile-middle {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  margin-bottom: 3.125rem;
  background-color: #f2f2f2;
}
/* 底部 */
.detaile-footer {
  width: 100%;
  height: 3.125rem;
  background-color: #fff;
  box-shadow: 0 0 0.1rem #ddd;
  position: fixed;
  bottom: 0;
  z-index: 998;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.detaile-dianpu,
.detaile-kefu,
.detaile-shopcart {
  width: 3rem;
  height: 3.125rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.detaile-dianpu img,
.detaile-kefu img,
.detaile-shopcart img {
  width: 1.25rem;
  height: 1.25rem;
}
.detaile-dianpu p,
.detaile-kefu p,
.detaile-shopcart p {
  font-size: 0.875rem;
  color: #262626;
}
.addShopCart,
.nowShop {
  width: 5.5rem;
  height: 2.75rem;
  padding-top: 0.3125rem;
}
.addShopCart p {
  background-color: #f2210c;
}
.nowShop p {
  background-color: #ffc10d;
}
.addShopCart p,
.nowShop p {
  width: 5.1875rem;
  height: 2.375rem;
  border-radius: 2.375rem;
  text-align: center;
  line-height: 2.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
}
/* 轮播图 */
.detaile-swiper {
  width: 100%;
  height: 20rem;
  overflow: hidden;
  position: relative;
}
.detaileSwiper {
  width: 100%;
  height: 100%;
}
.detaileSwiperImg {
  width: 100%;
  height: 100%;
}
/* 图片放大 */
.videoClass {
  width: 20rem;
  height: 35.5rem;
  background-color: #fff;
  position: fixed;
  z-index: 9999999999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: hidden;
}
.videoClass2 {
  width: 20rem;
  height: 20rem;
  margin-top: 7.8125rem;
}
/* 播放按钮 */
.videoBtn {
  width: 100%;
  height: 1.875rem;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 1.5625rem;
  z-index: 999;
}
.videoBtn-div1 {
  width: 5.1875rem;
  height: 1.875rem;
  border-radius: 1.875rem;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
}
.videoBtn-div1 img {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
}
.videoBtn-div1 span {
  font-size: 0.75rem;
  color: #262626;
  margin-left: 0.3125rem;
}
.videoBtn-div2 {
  width: 20rem;
  height: 100%;
  background-color: #000;
  position: fixed;
  top: 0;
  z-index: 9999999999999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: hidden;
}
.videoBtn-div2 source {
  width: 20rem;
  height: 20rem;
  margin-top: 7.8125rem;
}
/* 页数 */
.swiper-pageNum {
  width: 2.5rem;
  height: 1.25rem;
  background-color: rgba(0, 0, 0, 0.2);
  border-top-left-radius: 0.625rem;
  border-bottom-left-radius: 0.625rem;
  text-align: center;
  color: #fff;
  font-size: 1rem;
  line-height: 1.25rem;
  position: absolute;
  right: 0;
  bottom: 0.9375rem;
  z-index: 999;
}
/* 广告 */
.detaile-advertise {
  width: 100%;
  height: 2.6875rem;
}
.detaile-advertise img {
  width: 100%;
  height: 100%;
}
/* 价格 */
.detaile-price {
  padding-top: 0.625rem;
  width: 100%;
  height: 2.1875rem;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
}
.price-div {
  width: 5.25rem;
  color: #f2270c;
  margin-left: 1.25rem;
}

.price-priceSmall {
  font-size: 1rem;
}
.price-priceBig {
  font-size: 1.875rem;
  font-weight: 700;
}
.detaile-price-right {
  width: 5rem;
  height: 100%;
  display: flex;
  margin-right: 1.25rem;
}
.detaile-price-right-div {
  width: 2.5rem;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: baseline;
  padding-top: 0.3125rem;
}
.detaile-price-right-img {
  width: 1.125rem;
  height: 1.125rem;
}
.detaile-price-right-p {
  font-size: 0.75rem;
}
/* 标题介绍 */
.detaile-msg {
  width: 100%;
  background-color: #fff;
  padding: 1.25rem 0 0 0.625rem;
  border-bottom-left-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
  overflow-x: hidden;
}
.detaile-msg-top {
  width: 100%;
  height: 1.125rem;
  display: flex;
}
.detaile-jingdongImg {
  width: 2.6875rem;
  height: 0.8125rem;
  margin-top: 0.3125rem;
}
.detaile-title1 {
  font-size: 0.875rem;
  color: #333;
  margin-left: 0.3125rem;
}
.detaile-name {
  width: 95%;
  height: 3rem;
  margin: 0.8rem auto;
}
.detaile-goodName {
  font-size: 1.25rem;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.3125rem;
}
.detaile-msg-bottom {
  width: 95%;
  height: 3rem;
  margin-top: 0.625rem;
  border-bottom-left-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
}
.detaile-msg-bottom-p {
  font-size: 0.75rem;
  color: #666;
}
.detaile-msg-bottom-a {
  color: #e4393c;
}
/* 优惠 */
.detaile-youhui {
  width: 100%;
  border-radius: 0.625rem;
  margin-top: 0.625rem;
  background-color: #fff;
  padding: 0.625rem 0;
}
.youhui-first {
  width: 95%;
  height: 1.875rem;
  margin: 0.625rem auto;
  display: flex;
  align-items: center;
}
.youhui-first p {
  color: #262626;
  font-weight: 700;
  font-size: 0.875rem;
  margin-right: 0.625rem;
}
.youhui-first-span {
  display: flex;
  position: relative;
  border: 1px solid #ff8373;
}
.youhui-first-span {
  position: relative;
  display: flex;
  width: 5rem;
  align-items: center;
  justify-content: center;
  line-height: normal;
  margin-right: 6px;
  margin-left: 6px;
  border-radius: 2.5px;
  height: 15px;
  color: #f2270c;
  font-size: 0.5rem;
}
.youhui-first-befor {
  left: -1px;
  width: 3px;
  height: 6px;
  position: absolute;
  top: 50%;
  background-color: #fff;
  border-radius: 0 3px 3px 0;
  border: 1px solid #ff8373;
  border-left: none;
}
.youhui-first-after {
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 6px;
  background-color: #fff;
  border-radius: 3px 0 0 3px;
  border: 1px solid #ff8373;
  border-right: none;
}
.youhui-first-img {
  display: flex;
  width: 1.875rem;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  margin-right: 0.625rem;
}
.youhui-first-img img {
  width: 1.25rem;
  height: 1.25rem;
}
.youhui-two {
  width: 100%;
  height: 1.875rem;
  margin: 0.625rem auto 0;
  font-size: 0.875rem;
  padding-left: 1.875rem;
}
.youhui-two-span1 {
  color: #e4393c;
  border: 1px solid #e4393c;
  margin-right: 0.3125rem;
}
/* 已选 */
.detaile-yixuan {
  width: 100%;
  height: 3.625rem;
  margin-top: 0.625rem;
  border-top-left-radius: 0.625rem;
  border-top-right-radius: 0.625rem;
}
/* 已选展示层 */
.yixuan-span1 {
  color: #262626;
  font-weight: 700;
  font-size: 0.875rem;
  margin-right: 0.625rem;
}
.yixuan-span2 {
  font-size: 0.875rem;
}
.yixuan-moreImg {
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  right: 0;
}
.van-icon-arrow::before {
  display: none;
}
.van-cell {
  padding: 0.625rem;
}
/* 已选弹出层 */
.detaile-select {
  width: 100%;
  background-color: #fff;
}
.select-top {
  width: 100%;
  height: 7.375rem;
  display: flex;
  padding-top: 1.125rem;
  padding-left: 0.625rem;
  position: relative;
}
.select-top-left {
  width: 6.25rem;
  height: 6.25rem;
  margin-right: 0.625rem;
}
.select-top-left img {
  width: 100%;
  height: 100%;
}
.select-top-right {
  width: 10.625rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.select-top-price {
  height: 2rem;
  color: #f2270c;
}
.price-priceSmall {
  font-size: 1.25rem;
}
.price-priceBig {
  font-size: 1.875rem;
  font-weight: 700;
}
.select-yixuan {
  height: 1.5625rem;
  font-size: 0.75rem;
  line-height: 1.5625rem;
  color: #333;
}
.select-yixuan-one {
  color: #8c8c8c;
  margin-right: 0.625rem;
}
.select-yixuan-two {
  margin-right: 0.625rem;
}
.xxx {
  width: 2rem;
  height: 2.75rem;
  position: absolute;
  top: 0;
  right: 0;
}
.xxx div {
  width: 1.25rem;
  height: 1.25rem;
  background-color: #f2f2f2;
  border-radius: 50%;
  position: absolute;
  bottom: 0.625rem;
  left: -0.625rem;
}
.xxx div img {
  width: 1.25rem;
  height: 1.25rem;
  margin: auto;
}
.select-top-middle {
  width: 100%;
  height: 10rem;
  margin-top: 1.25rem;
}
.select-leibie {
  font-size: 13px;
  color: #262626;
  margin: 0 1.125rem;
  font-weight: 700;
  height: 2.5rem;
  line-height: 2.5rem;
}
.select-goodname {
  padding: 0 16px;
  min-width: 20px;
  max-width: 270px;
  overflow: hidden;
  height: 30px;
  line-height: 30px;
  float: left;
  text-align: center;
  margin-left: 12px;
  margin-bottom: 10px;
  font-size: 11px;
  color: #262626;
  border: 1px solid #f2f2f2;
  background: #f2f2f2;
  border-radius: 15px;
}
.activeClass {
  padding: 0 16px;
  min-width: 20px;
  max-width: 270px;
  overflow: hidden;
  line-height: 30px;
  float: left;
  text-align: center;
  margin-left: 12px;
  margin-bottom: 10px;
  border-radius: 15px;
  background: #fcedeb;
  border: 1px solid #f2270c;
  font-size: 11px;
  color: #f2270c;
  font-weight: 700;
  height: 30px;
}
.select-add {
  width: 100%;
  height: 4rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0.625rem;
  margin-top: 1.25rem;
}
.select-shuliang {
  white-space: nowrap;
  width: 1.5625rem;
  font-size: 0.875rem;
  font-weight: 700;
  margin-left: 0.625rem;
}
.select-change {
  margin-right: 1.25rem;
  font: 1rem;
  display: flex;
}
.select-change span {
  width: 0.9375rem;
  height: 1.125rem;
  text-align: center;
  color: #262626;
}
span.select-num {
  width: 2.125rem;
  height: 1.125rem;
  text-align: center;
  line-height: 1.125rem;
  font-size: 0.75rem;
  background-color: #f2f2f2;
  margin: 0 0.3125rem;
}
.select-bottom {
  width: 100%;
  height: 3.125rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.25rem;
}
.select-bottom div {
  width: 8.6875rem;
  height: 2.375rem;
  border-radius: 2.375rem;
  margin-right: 0.625rem;
  color: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 2.375rem;
  font-size: 0.875rem;
}
.select-bottom-add {
  background-color: #f23201;
}
.select-bottom-shop {
  background-color: #fac80d;
}
/* 送至 */
.detaile-songzhi {
  width: 100%;
  height: 5.8125rem;
}
.detaile-songzhi-van {
  width: 100%;
  height: 5.8125rem;
  border-bottom: 1px solid #fcfcfc;
  position: relative;
}
.songzhi-center {
  width: 13rem;
  height: 5.8125rem;
  padding-left: 2.375rem;
}
.songzhi-address {
  color: #262626;
  font-size: 0.875rem;
  border: none;
  outline: none;
}
.songzhi-msg {
  width: 12.5rem;
  font-size: 0.75rem;
  position: relative;
}
.songzhi-msg-img {
  width: 4.375rem;
  height: 0.8125rem;
}
.songzhi-msg-p {
  width: 12.5rem;
  height: 2.375rem;
  white-space: normal;
  position: absolute;
  top: 0;
  text-indent: 4.5rem;
  line-height: 1.2rem;
}
.songzhi-msg-span1 {
  color: #f2270c;
  margin-left: 0.3125rem;
}
.songzhi-msg-span2 {
  color: #999;
  margin-left: 0.1875rem;
}
.songzhi-left {
  float: left;
  width: 2.375rem;
  height: 3.5625rem;
  font-size: 0.875rem;
  font-weight: 700;
}
.songzhi-right {
  float: right;
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 99;
}
.songzhi-right img {
  width: 100%;
  height: 100%;
}
/* 重量 */
.detaile-weight {
  width: 100%;
  height: 3.4375rem;
  line-height: 3.4375rem;
  background-color: #fff;
  border-bottom: 1px solid #fcfcfc;
  padding-left: 0.625rem;
  border-bottom-left-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
}
.weight-span1 {
  font-size: 0.875rem;
  font-weight: 700;
}
.weight-span2 {
  font-size: 0.875rem;
  color: #262626;
  margin-left: 0.625rem;
}
/* 评价 */
.detaile-pingjia {
  width: 100%;
  border-top-left-radius: 0.625rem;
  border-top-right-radius: 0.625rem;
  margin-top: 0.625rem;
  background-color: #fff;
  padding-bottom: 4.375rem;
  position: relative;
  border-bottom: 0.125rem solid #f2f2f2;
}
.pingjia-top {
  width: 100%;
  height: 2.8125rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pingjia-top-div {
  position: relative;
  padding-left: 0.9375rem;
}
.bgc-gradient {
  position: absolute;
  left: 0.625rem;
  top: 0.3rem;
  width: 3px;
  height: 15px;
  background-image: linear-gradient(180deg, #f5503a, #fad1cb);
}
.pingjia-top-span1 {
  font-size: 1rem;
  font-weight: 700;
  color: #262626;
}
.pingjia-top-span2 {
  font-size: 0.75rem;
  color: #262626;
  font-weight: 700;
  margin-left: 0.3125rem;
}
.pingjia-top-span3 {
  font-size: 0.75rem;
  color: #8c8c8c;
  margin-right: 0.3125rem;
}
.pingjia-top-span4 {
  font-size: 0.75rem;
  color: #8c8c8c;
  font-weight: 700;
  margin-right: 0.3125rem;
}
.pingjia-top-span5 {
  font-size: 1rem;
  font-weight: 700;
  color: #333;
  margin-right: 0.9375rem;
}
.pingjia-chengyu {
  width: 100%;
  height: 5.1875rem;
  padding: 0 0.625rem;
  padding-left: 1.25rem;
}
.pingjia-chengyu p {
  display: inline-block;
  margin: 0 0.625rem 0.9375rem 0;
  text-align: center;
  width: 6rem;
  height: 30px;
  border-radius: 15px;
  line-height: 30px;
  font-size: 11px;
  color: #262626;
  background: #fcedeb;
}
/* 客户评价 */
.kehupingjia {
  width: 100%;
  height: 13.2rem;
  padding: 0 1.25rem 0.625rem;
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
  border-bottom: 1px solid #f2f2f2;
}
.kehupingjia-top {
  width: 100%;
  display: flex;
  position: relative;
}
.kehupingjia-top-div1 {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
}
.kehupingjia-top-div1 img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.kehupingjia-top-div2 {
  font-size: 0.75rem;
  color: #262626;
  margin-left: 0.75rem;
  margin-right: 0.3125rem;
  height: 1.25rem;
  line-height: 1.25rem;
}
.kehupingjia-top-div3 img {
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.125rem;
}
.kehupingjia-top-div4 {
  width: 3.875rem;
  height: 1.25rem;
  font-size: 0.75rem;
  color: #999;
  line-height: 1.25rem;
  position: absolute;
  right: 0.3125rem;
}
.kehupingjia-middle {
  width: 100%;
  height: 3.6rem;
  margin-top: 0.625rem;
  padding: 0.625rem 0;
  line-height: 1rem;
  overflow: hidden;
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.kehupingjia-bottom {
  width: 100%;
  height: 5rem;
  display: flex;
  overflow: auto;
  margin-top: 1.25rem;
}
.kehupingjia-bottom img,
.kehupingjia-bottom video {
  width: 5rem;
  height: 5rem;
  margin-right: 0.625rem;
}
.kehupingjia-bottom video source {
  width: 100%;
  height: 100%;
}
.quanbupingjia {
  width: 100%;
  height: 1.5625rem;
  position: absolute;
  bottom: 1.25rem;
  display: flex;
  justify-content: center;
}
.quanbupingjia div {
  width: 6.25rem;
  height: 1.5625rem;
  text-align: center;
  line-height: 1.5625rem;
  font-size: 0.75rem;
  text-align: center;
  color: #262626;
  border: 1px solid #ececec;
  border-radius: 1.5625rem;
}
/* 问答 */
.detaile-wenda {
  width: 100%;
  background-color: #fff;
  border-bottom-left-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
  padding-bottom: 0.9375rem;
}
.detaile-wenda-top {
  width: 100%;
  height: 2.75rem;
  padding: 1rem;
  position: relative;
}
.bgc-gradient1 {
  position: absolute;
  left: 1rem;
  top: 1.2rem;
  width: 3px;
  height: 15px;
  background-image: linear-gradient(180deg, #f5503a, #fad1cb);
}
.wenda-span1 {
  font-size: 1rem;
  font-weight: 700;
  color: #262626;
  margin-left: 0.625rem;
}
.wenda-span2 {
  font-size: 0.75rem;
  color: #8c8c8c;
  position: absolute;
  right: 1rem;
}
.detaile-wenda-bottom {
  width: 100%;
  height: 1.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.625rem 0;
}
.wenda-bottom-left {
  margin-left: 0.625rem;
  white-space: nowrap;
  overflow: hidden;
  margin-right: 1.25rem;
}
.wenda-bottom-left-span1 {
  font-size: 0.875rem;
  color: #fff;
  background-color: #ff9600;
  border-radius: 0.125rem;
}
.wenda-bottom-left-span2 {
  flex-shrink: inherit;
  white-space: nowrap;
  font-size: 0.75rem;
  color: #333;
  margin-left: 0.3125rem;
}
.wenda-bottom-right {
  margin-right: 0.625rem;
}
.wenda-bottom-right-span1 {
  font-size: 0.75rem;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 店铺信息 */
.detaile-dianpumsg {
  width: 100%;
  padding: 0.625rem;
  margin-top: 0.625rem;
  border-radius: 0.625rem;
  background-color: #fff;
}
.dianpumsg-top {
  width: 100%;
  height: 2.5rem;
  line-height: 2.5rem;
}
.dianpumsg-top-img {
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 0.625rem;
  vertical-align: middle;
}
.dianpumsg-top-span1v {
  display: inline-block;
  width: 10.625rem;
  font-size: 0.8125rem;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dianpumsg-top-span2 {
  display: inline-block;
  height: 0.8125rem;
  text-align: center;
  line-height: 0.8125rem;
  width: 3.125rem;
  font-size: 0.75rem;
  color: #fff;
  background-color: #f2180c;
  border-radius: 0.1875rem;
  margin-left: 1.25rem;
  vertical-align: middle;
}
.dianpumsg-middle {
  width: 100%;
  height: 2.875rem;
  padding: 0 0.9375rem;
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
}
.dianpumsg-middle-left,
.dianpumsg-middle-right {
  width: 8.875rem;
  height: 2.875rem;
  text-align: center;
  line-height: 1.4375rem;
  font-size: 0.875rem;
}
.dianpumsg-middle-left {
  border-right: 1px solid #f2f2f2;
}
.dianpumsg-middle-left-p1 {
  color: #333;
}
.dianpumsg-middle-left-p2 {
  color: #999;
}
.dianpumsg-bottom {
  width: 100%;
  height: 1.875rem;
  display: flex;
  justify-content: center;
  margin: 0.9375rem 0 0.625rem;
}
.dianpumsg-bottom-div {
  width: 6.5rem;
  height: 1.875rem;
  border-radius: 0.9375rem;
  line-height: 1.875rem;
  border: 1px solid #c2c2c2;
  margin-right: 0.625rem;
  text-align: center;
}
.dianpumsg-bottom-img {
  width: 1.125rem;
  height: 1.125rem;
  margin-right: 0.3125rem;
  vertical-align: middle;
}
.dianpumsg-bottom-span {
  font-size: 0.875rem;
  color: #333;
}
/* 猜你喜欢 */
.detaile-like {
  width: 100%;
  margin-top: 0.625rem;
  border-radius: 0.625rem;
  padding: 0.9375rem 0.625rem;
  background-color: #fff;
}
.like-top {
  width: 100%;
  height: 2.8125rem;
  position: relative;
}
.bgc-gradient2 {
  position: absolute;
  left: 0.625rem;
  top: 0.3rem;
  width: 3px;
  height: 15px;
  background-image: linear-gradient(180deg, #f5503a, #fad1cb);
}
.like-top-span {
  font-size: 1rem;
  font-weight: 700;
  color: #262626;
  margin-left: 1.2rem;
}
.like-swiper {
  width: 100%;
  height: 22.8rem;
}
.likeSwiper {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}
.likeSwiper-ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.likeSwiper-li {
  width: 5rem;
  height: 10rem;
  margin-right: 0.625rem;
  margin-top: 0.625rem;
}
.likeSwiper-img {
  width: 100%;
  height: 5.6875rem;
}
.likeSwiper-msg {
  width: 100%;
  height: 2.6rem;
  line-height: 1.3rem;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.likeSwiper-price {
  width: 100%;
  height: 1.625rem;
  color: #f2270c;
}
.likeSwiper-price-small {
  font-size: 0.875rem;
}
.likeSwiper-price-big {
  font-size: 1rem;
  font-weight: 700;
}
/* 商品介绍 */
.detaile-like-jieshao {
  width: 100%;
}
.jieshao-btn {
  width: 100%;
  height: 3.8125rem;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  border-radius: 0.625rem;
  margin-top: 0.625rem;
  align-items: center;
}
.jieshao-btn-span {
  display: block;
  height: 1.5625rem;
  text-align: center;
  font-size: 0.8125rem;
  color: #262626;
  border-bottom: 0.1875rem solid #fff;
}
.activeBorder {
  border-bottom: 0.1875rem solid red;
  font-weight: 700;
}
.active-component {
  width: 100%;
  background-color: #fff;
}
/* 京东图标 */
.jingdong2 {
  width: 100%;
  height: 11rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.jingdong2-img {
  width: 12.5rem;
  height: 2.5rem;
}
</style>
